<template>
  <div class="dashboard-container">
    <el-card class="box-card">
      <!-- 提示文案 -->
      <el-alert
        :title="titleX"
        type="warning"
        effect="dark"
        show-icon
        :closable="false"
      />
      <!-- 输入框 -->
      <el-form label-width="120px" style="margin-top: 16px;">
        <el-form-item label="请选择商品分类: ">
          <el-cascader
            v-model="value"
            :options="options"
            :props="props"
            @change="handleChange"
          />
        </el-form-item>
      </el-form>

      <!-- 导航 -->
      <el-tabs
        v-model="activeName"
        type="border-card"
        @tab-click="tabClick"
      >
        <el-tab-pane label="动态参数" name="参数">
          <parameterGroup ref="callSon1" :lazy="true" :active-name="activeName" />
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="属性">
          <parameterGroup ref="callSon2" :active-name="activeName" />
        </el-tab-pane>
      </el-tabs>

    </el-card>
  </div>
</template>

<script>
import parameterGroup from './components/parameter-group'
import { getGoodsCategories } from '@/api/Taxonomies.js'
export default {
  name: 'Params',
  components: {
    parameterGroup
  },
  data() {
    return {
      titleX: '注意: 只允许为第三级分类设置相关参数',
      // 存联级数据
      value: '',
      // 定义联级渲染名称
      props: {
        value: 'cat_id',
        label: 'cat_name'
      },
      // 存联级数据
      options: [],
      // 默认导航
      activeIndex: '1',
      // 选中参数
      activeName: '参数',
      // 当前联级id
      valueId: 0
    }
  },

  created() {
    this.goodsCategories()
  },

  methods: {
    // 获取联级数据
    async goodsCategories() {
      const res = await getGoodsCategories()
      this.options = res
    },
    // 联级数据
    handleChange(value) {
      this.valueId = value[2]
      if (value.length < 3) return this.$message.error('只允许为第三级分类设置相关参数')
      if (this.activeName === '参数') {
        this.$refs.callSon1.addParameter(value[2])
      } else {
        this.$refs.callSon2.addParameter(value[2])
      }
    },
    // 切换标签触发
    tabClick() {
      // this.flag = !this.flag// console.log(this.$refs.callSon.form.sel)
      if (this.valueId !== 0) {
        if (this.activeName === '参数') {
          this.$nextTick(_ => {
            this.$refs.callSon1.addParameter(this.valueId)
          })
        } else {
          this.$nextTick(_ => {
            this.$refs.callSon2.addParameter(this.valueId)
          })
        }
      } else {
        this.$message.error('输入框不能为空')
      }
    }

  }
}
</script>

<style scoped lang='scss'>

</style>
